<script setup>
import { reactive } from "vue";
import { ref } from "vue";
import { login } from "@/apis/login";

const showPassword = ref(true);

const phone = ref("");
const password = ref("");

const validate = reactive({
  phoneMsg: "",
  passwordMsg: "",
});
const handlePhone = () => {
  if (/^\d{11}$/.test(phone.value)) {
    validate.phoneMsg = "";
    return true;
  } else {
    validate.phoneMsg = "请输入正确的手机号";
    return false;
  }
};
const handlePwd = () => {
  if (/\w{6,}/.test(password.value)) {
    validate.passwordMsg = "";
    return true;
  } else {
    console.log(password.value.length, "失败");
    validate.passwordMsg = "请输入6-18位字符，不包含空格";
    return false;
  }
};

// 登录
const onLogin = async () => {
  if (handlePhone() && handlePwd()) {
    const loginData = await login({
      phone: phone.value,
      password: password.value,
    });
    console.log(loginData);
  } else {
    uni.showToast({
      title: "账号或密码输入格式错误",
      icon: "none",
    });
  }
};
</script>

<template>
  <view class="my-login-phone">
    <view class="input-wrap">
      <view clss="phone-wrap">
        <input
          class="input"
          type="text"
          maxlength="11"
          placeholder="请输入手机号"
          placeholder-style="font-size: 28rpx;"
          v-model="phone"
          @blur="handlePhone"
        />
        <view class="phone-tip"> {{ validate.phoneMsg }} </view>
      </view>
      <view class="pwd-input-wrap">
        <view class="pwd-input">
          <input
            class="input"
            maxlength="18"
            placeholder="请输入密码"
            placeholder-style="font-size: 28rpx;"
            :password="showPassword"
            v-model="password"
            @blur="handlePwd"
          />
          <view class="show-ele" @click="showPassword = !showPassword">
            <uni-icons
              type="eye-filled"
              size="20"
              v-show="!showPassword"
            ></uni-icons>
            <uni-icons
              type="eye-slash-filled"
              size="20"
              v-show="showPassword"
            ></uni-icons>
          </view>
        </view>
        <view class="phone-tip">{{ validate.passwordMsg }}</view>
      </view>
    </view>

    <button class="login-btn" type="primary" @tap="onLogin">登录</button>
  </view>
</template>

<style lang="scss">
.my-login-phone {
  display: flex;
  font-size: 34rpx;
  align-items: center;
  flex-direction: column;
  .input-wrap {
    margin-top: 100rpx;
    .input {
      height: 80rpx;
      width: 600rpx;
      border-bottom: 4rpx #eee solid;
    }
    .phone-tip {
      height: 50rpx;
      line-height: 50rpx;
      font-size: 24rpx;
      color: $warnColor;
    }
    .pwd-input-wrap {
      .pwd-input {
        margin-top: 40rpx;
        position: relative;
        display: flex;
        .show-ele {
          line-height: 60rpx;
          width: 60rpx;
          text-align: center;
          position: absolute;
          z-index: 1000;
          right: 0;
          bottom: 16rpx;
        }
      }
    }
  }
  .login-btn {
    letter-spacing: 6rpx;
    margin-top: 80rpx;
    line-height: 90rpx;
    width: 500rpx;
    font-weight: bold;
    border-radius: 50rpx;
    background-color: $sucColor;
  }
}
</style>
